<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demo</title>
	<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> 
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></script>

	<script type="text/javascript">
		var doit = false;
		/*
			This is a bit of a mess.  Basically, you need to redo enableDates when the month changes.
			
			BUT.
			
			If you do it on the offset, it's too soon, we can't get the current month.  So, we set 'doit'
			and when a refresh hits, *after* that doit is set, we recalc (being sure to flip the flag back.
			
			It's hacky, but it seems to work
		*/
		$(document).delegate('body', 'datebox', function(e,p) {
			if ( p.method === 'offset' && p.type === 'm' ) {
				doit = true;
			}
			if ( p.method === 'refresh' && doit === true ) {
				doit = false;
				$('#pickopt').trigger('change');
			}
			if ( p.method === 'open' ) {  // Even more hack - this is needed if you change the drowdown before first open
				$('#pickopt').trigger('change');
			}
		});
		
		/* This part actually does the calculation. */
		$(document).delegate('#pickopt', 'change', function() {
			switch ( parseInt($('#pickopt').val(), 10) ) {
				case 0:
					$('#lang1').data('mobileDatebox').options.enableDates = false;
					$('#lang1').data('mobileDatebox').refresh();
					break;
				case 1: // Every other wednesday (3)
					$('#lang1').data('mobileDatebox').options.enableDates = new Array(
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 3)[0],
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 3)[2],
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 3)[4]
					);
					$('#lang1').data('mobileDatebox').refresh();
					break;
				case 2:
					$('#lang1').data('mobileDatebox').options.enableDates = new Array(
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 6)[1],
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 6)[2],
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 6)[3],
						$('#lang1').data('mobileDatebox')._getRecDays(null, null, 6)[4]
					);
					$('#lang1').data('mobileDatebox').refresh();
					break;
			}
		});
	</script>
	
</head>
<body>
<div data-role="page" id="main"> 
	<div data-role="header">
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
		<h1>jQueryMobile - DateBox</h1>
	</div>
	<div data-role="content">
		<div data-role="fieldcontain">
			<label for="pickopt">Recurrance option?</label>
			<select name="pickopt" id="pickopt" data-native-menu="false">
				<option value="0" selected="selected">none</option>
				<option value="1">Every other Wednesday</option>
				<option value="2">Any Saturday but the first</option>
			</select>
		</div>
		<div data-role="fieldcontain">
			<label for="lang1">calbox</label>
			<input name="lang1" type="text" data-role="datebox" data-options='{"mode": "calbox"}' id="lang1" />
		</div>
		
				
		
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>
	<div data-role="footer">
	</div>
</div>
</html>
